<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <include file="public@head" />

    <style>
        .sc_chat_wra{
            height: 500px;
            overflow: auto;
        }
        .sub_comment_list .comment{
            padding: 10px 0 8px;
            line-height: 20px;
            color: #666;

        }
        .auth_comment .comment,.auth_comment .sub_tool_group{
            padding-left: 44px;
        }

        .sub_tool_group{
            margin-bottom: 14px;
        }

        .sub_tool_group .reply_btn{
            color: #669966;
            cursor: pointer;
        }

        .sub_comment_list{
            border-left: 1px solid #e8e8e8;
            margin-left: 50px;
            padding-left: 16px;
            margin-top: 20px;
        }

        .sub_comment .name{
            color: #80aa9d;
            margin-right: 14px;
        }

        .detail_title{
            position: relative;
        }
        .back_btn{
            position: absolute;
            left: 0;
            padding-left: 44px;
            background: url("__TMPL__public/assets/img/icon_back.png") no-repeat 12px center;
            color: #999;
        }
        .back_btn:hover{
            color: #333;
            /*color: #5cdb96;*/
        }

        .new_comment{
            width: 638px;
            display: block;
            margin: 0 auto;
        }
        .user_input_wrap .user_input{
            outline: none;
            resize:none;
            /*border-style: none;*/
            box-shadow: none;
            text-decoration: none;
            /*border-width: 0px;*/
            word-wrap: break-word;
            /*line-height: 18px;*/
            padding: 12px 6px 0 10px;
            /*width: 580px;*/
            height: 44px;
            line-height: 18px;
            border: 1px solid #ccc;
            background: #f9f9f9;
            border-radius: 4px;
            overflow: auto;
            display: block;
            box-sizing: border-box;
            width: 100%;

        }

        .new_comment span.cancel_btn,.main_comment span.cancel_btn{
            color: #999;
            font-size: 16px;
            margin-top: 26px;
            cursor: pointer;

        }
        .new_comment span.send_btn,.main_comment span.send_btn{
            width: 68px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #04dd98;
            margin: 14px 0 0 30px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;

        }
        .sl_all_wra{
            padding-right: 24px;
        }
        .reply_btn{
            color: #669966;
            cursor: pointer;
        }
        .leave_btn{
            color: #999;
            font-size: 16px;
            margin-top: 26px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<include file="public@nav" />
<div class="center ss_wra clearfix">
    <include file="public@starmessnav" />
    <div class="an_right_wra sl_right_wra fr">
        <h3 class="sl-title">刘涛的留言板</h3>
        <div class="sl_all_wra">
            <p class="tips">全部留言</p>
            <ul class="sl_list_wra">
                <!--<li>
                    <div class="clearfix">
                        <img class="fl fans_head" src="__TMPL__public/assets/img/user_img.png" alt="">
                        <div class="fl fans_info">
                            <h4>贝贝猫</h4>
                            <span class="sl_time">2小时前</span>
                        </div>
                        <span class="fl user_leval_mark"></span>
                    </div>
                    <p class="sl_content">你还欠我们一个机会呢啊啊啊啊啊</p>
                    <div class="sub_comment_list">
                        <div class="sub_comment"><div class="info"><span class="name">测试用户2回复：若璃</span><span class="time">2017-05-17 18:15</span></div><p class="comment">邱志航2货</p><div class="sub_tool_group clearfix"><span data-c_udid="22" data-name="测试用户2" class="reply_btn fl">回复</span><span class="detel_btn fr">删除</span></div></div>
                    </div>
                </li>
                <li>
                    <div class="clearfix">
                        <img class="fl fans_head" src="__TMPL__public/assets/img/user_img.png" alt="">
                        <div class="fl fans_info">
                            <h4>贝贝猫</h4>
                            <span class="sl_time">2小时前</span>
                        </div>
                        <span class="fl user_leval_mark"></span>
                    </div>
                    <p class="sl_content lastBox">你还欠我们一个机会呢啊啊啊啊啊</p>
                </li>-->
            </ul>
        </div>

        <div class="new_comment clearfix">
            <div class="clearfix user_input_wrap">
                <textarea placeholder="" name="" id="" class="user_input" cols="30" rows="10"></textarea>
            </div>
            <span class="fl leave_btn">留言</span>
            <span class="fr send_btn">回复</span>
            <span class="fr cancel_btn">取消</span>
        </div>

    </div>
</div>
<include file="public@footer" />
<include file="public@scripts" />
<script>
headerMove(3);
$(function(){
    var u_sid = iService.getQueryString("u_sid"),
            u_name = iService.getQueryString("u_name"),
            user_input = $(".user_input");
    $(".secret_page").on("click",function(){
        window.location.href = "../Message/starSecret.html?u_sid="+u_sid+"&u_name="+u_name;
    });
    $(".leave_page").on("click",function(){
        window.location.href = "../Message/starLeave.html?u_sid="+u_sid+"&u_name="+u_name;
    });
    $(".sl-title").html(u_name+"的留言板");
    user_input.on("focus",function(){
        $(this).stop().animate({"height":"100px"}, "fast");
    });
    user_input.on("blur",function(){
        if($(this).val()==""){
            $(this).stop().animate({"height":"44px"}, "fast");
        }
    });
    var leave_btn = $(".leave_btn");
    leave_btn.html("给"+u_name+"留言").on("click",function(){
        user_input.data({'c_udid':"",'c_parent':"",'cid':u_sid});
        user_input.attr({"placeholder":"给"+u_name+"留言"});
    });
    user_input.data({'c_udid':0,'c_parent':0,'cid':u_sid});
    user_input.attr({"placeholder":"给"+u_name+"留言"});
    var leave_param = {
        url:'Circles/comList',
        data:{
            cid: u_sid,
            type: "30",
            page: 1
        }
    };
    $.JsonRpc(leave_param,function(data){
        console.log(data);
        if(data.data.list){
            data = data.data.list;
            var tpl = "";
            $.each(data,function(i){
                tpl +=
                    '<li>'+
                    '<div class="main_comment">'+
                    '<div class="clearfix">'+
                    '<img class="fl fans_head" src="'+data[i].u_avatar+'" alt="">'+
                    '<div class="fl fans_info">'+
                    '<h4>'+data[i].u_nickname+'</h4>'+
                    '<span class="sl_time">'+iService.timeFormat(data[i].c_createtime)+'</span>'+
                    '</div>'+
                    '<span class="fl user_leval_mark"></span>'+
                    '</div>'+
                    '<div class="sl_content clearfix">'+
                    '<p>'+data[i].c_content+'</p>'+
                    '<span data-c_parent="'+data[i].cid+'" data-c_udid="'+data[i].c_udid+'" data-name="'+data[i].u_nickname+'" class="reply_btn fl">回复</span>'+
                    '</div>'+
                    '</div>'+
                    '<div class="sub_comment_list">';
                if(data[i].children){
                    $.each(data[i].children,function(k){
                        tpl +=
                            '<div class="sub_comment">'+
                            '<div class="info">'+
                            '<span class="name">'+data[i].children[k].cnickname+'回复：'+data[i].children[k].pnickname+'</span>'+
                            '<span class="time">'+iService.timeFormat(data[i].children[k].c_createtime)+'</span>'+
                            '</div>'+
                            '<p class="comment">'+data[i].children[k].c_content+'</p>'+
                            '<div class="sub_tool_group clearfix">'+
                            '<span data-c_parent="'+data[i].children[k].c_parent+'" data-c_udid="'+data[i].children[k].c_udid+'" data-name="'+data[i].children[k].cnickname+'" class="reply_btn fl">回复</span>'+
//                            '<span class="detel_btn fr">删除</span>'+
                            '</div>'+
                            '</div>';
                    });
                }
                tpl +=
                    '</div>'+
                    '</li>';
            });
            $(".sl_list_wra").html(tpl);
            $(".reply_btn").off("click").on("click",function(){
                user_input.data({'c_udid':$(this).data("c_udid"),'c_parent':$(this).data("c_parent"),'name':$(this).data("name")});
                user_input.attr({"placeholder":"回复"+$(this).data("name")});
                $(this).parents("li").addClass("active").siblings("li").removeClass("active");
            });
        }

        $(".send_btn").on("click",function(){
//          var cid = $(".user_input").data("c_parent");
            var comList_param = {
                url:'Circles/comSend',
                data:{
                    cid: u_sid,
                    description: user_input.val(),
                    parent: user_input.data("c_parent"),
                    pudid: user_input.data("c_udid"),
                    type: 30
                }
            };
            $.JsonRpc(comList_param,function(data){
                if(data.code==200){
                    data = data.data;
                    if(user_input.data("c_parent")!=0){
                        var tpl =
                                '<div class="sub_comment">'+
                                '<div class="info">'+
                                '<span class="name">'+data.comment.u_nickname+'回复:'+$(".user_input").data("name")+'</span><span class="time">'+data.comment.c_createtime.slice(0,16)+'</span>'+
                                '</div>'+
                                '<p class="comment">'+data.comment.c_content+'</p>'+
                                '<div class="sub_tool_group clearfix">'+
                                '<span data-c_parent="'+data.comment.c_parent+'" data-c_udid="'+data.comment.c_udid+'" data-name="'+data.comment.u_nickname+'" class="reply_btn fl">回复</span>'+
//                                '<span class="detel_btn fr">删除</span>'+
                                '</div>'+
                                '</div>';
                        $(tpl).appendTo($("li.active").find(".sub_comment_list"));
                    }

                    if(user_input.data("c_parent")==0){
                        var tpl_main =
                                '<li>'+
                                '<div class="main_comment">'+
                                '<div class="clearfix">'+
                                '<img class="fl fans_head" src="'+localStorage.u_avatar+'" alt="">'+
                                '<div class="fl fans_info">'+
                                '<h4>'+localStorage.u_nickname+'</h4>'+
                                '<span class="sl_time">'+iService.timeFormat(data.comment.c_createtime)+'</span>'+
                                '</div>'+
                                '<span class="fl user_leval_mark"></span>'+
                                '</div>'+
                                '<div class="sl_content clearfix">'+
                                '<p>'+data.comment.c_content+'</p>'+
                                '<span data-c_parent="'+data.comment.cid+'" data-c_udid="'+data.comment.c_udid+'" data-name="'+data.comment.u_nickname+'" class="reply_btn fl">回复</span>'+
                                '</div>'+
                                '</div>'+
                                '<div class="sub_comment_list"></div>'+
                                '</li>';
                        $(tpl_main).prependTo(".sl_list_wra");
                    }
                }
                user_input.trigger("blur").val("");
                $(".reply_btn").off("click").on("click",function(){
                    user_input.data({'c_udid':$(this).data("c_udid"),'c_parent':$(this).data("c_parent"),'name':$(this).data("name")});
                    user_input.attr({"placeholder":"回复"+$(this).data("name")});
                    $(this).parents("li").addClass("active").siblings("li").removeClass("active");
                });
            });
        });
    });
});

</script>
</body>
</html>
























